<template>
  <div class="app-container">
    <!-- 顶部控制台 -->
    <div class="filter-container">
      <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleOpenSavePage">添加路由</el-button>
    </div>
    <!-- 页面数据列表 -->
    <div class="data-table">
      <el-table :data="responseData.tableList"
                border style="width: 100%;"
                v-loading="pageData.loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                ref="multipleTable" tooltip-effect="dark" highlight-current-row
                @selection-change="handleTableSelection">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column fixed="left" prop="routerId" label="路由ID" width="120" align="center"/>
        <el-table-column prop="routerName" label="路由名称" width="240" align="center"/>
        <el-table-column prop="routerUrl" label="路由路径" width="420" align="center"/>
        <el-table-column prop="routerIcon" label="路由ICON" width="420" align="center"/>
        <el-table-column prop="routerId" label="权限ID" width="120" align="center"/>
        <el-table-column prop="routerStatus" label="菜单层级" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.routerSuperId === 0"><el-tag type="primary">父级菜单</el-tag></span>
            <span v-if="scope.row.routerSuperId !== 0"><el-tag type="success">子集菜单</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column prop="routerStatus" label="可用状态" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.routerStatus === 0"><el-tag type="warning">下架</el-tag></span>
            <span v-if="scope.row.routerStatus === 1"><el-tag type="success">发布</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column prop="routerShowIndex" label="展示顺序" width="120" align="center"/>
        <el-table-column fixed="right" label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleOpenUpdatePage(scope)">编辑</el-button>
            <el-button v-if="scope.row.routerStatus === 0" size="mini" type="success" @click="handleUpdateTableStatus(scope)">发布</el-button>
            <el-button v-if="scope.row.routerStatus === 1" size="mini" type="info" @click="handleUpdateTableStatus(scope)">下架</el-button>
            <el-button type="danger" size="mini"  @click="handleDeleteTableData(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页器-->
    <div style="margin-top: 20px">
      <div class="block" style="width: 100%; text-align: center">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="form.pageNum"
          :page-size="form.pageSize"
          :total="form.total"
          :page-sizes="[12, 50, 100, 200]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <!--路由新增隐藏域-->
    <div style="width: 60%; margin: auto">
      <el-dialog :title="pageData.formPanelTitle" :visible.sync="pageData.formPanelStatus" size="tiny"
                 :before-close="handleCloseSavePage">
        <el-form ref="form.routerForm" :model="form.routerForm" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="form.routerForm.routerName" maxlength="255" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.routerForm.routerUrl" maxlength="255" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="ICON">
            <el-input v-model="form.routerForm.routerIcon" maxlength="255" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="层级">
            <el-radio-group v-model="form.routerForm.routerSuper">
              <el-radio :label="0">父级菜单</el-radio>
              <el-radio :label="1">子集菜单</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="父级">
            <el-select
              v-model="form.routerForm.routerSuperId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="handleSearchData"
              :disabled="form.routerForm.routerSuper === 0">
              <el-option
                v-for="item in responseData.searchList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="form.routerForm.routerStatus">
              <el-radio :label="0">预设</el-radio>
              <el-radio :label="1">发布</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="顺序">
            <el-input-number v-model="form.routerForm.routerShowIndex" controls-position="right" :min="0" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleSaveButtonClick">保存路由</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// 组件引入
// 方法工具引入
import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
import { getPermission } from '@/utils/UserCookies';
// 接口引入
import { loadCmsRouterConfigList,loadCmsRouterListByStr,saveCmsRouterConfig,updateCmsRouterConfig,updateCmsRouterStatus,deleteCmsRouterConfig } from "@/api/system";
  export default {
    name: "router",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data(){
      return {
        pageData:{
          loading: false,// 表格加载状态
          formPanelStatus: false,
          formPanelTitle: "新增路由",
          formPanelType: 0
        },// 页面配置数据
        form:{
          selection: [],// 表格多选
          pageNum: 1,// 页码
          pageSize: 12,// 显示数
          total: 0,// 总数
          routerForm: {
            routerId: "",// 路由ID
            routerName: "",// 路由名称
            routerUrl: "",// 路由地址
            routerIcon: "",// 路由图标
            routerSuper: "",// 路由父级(名称)
            routerSuperId: "",// 路由父级(ID)
            routerStatus: "",// 可用状态
            routerShowIndex: ""// 展示顺序
          },
        },// 页面表单
        formRules: {},// 表单验证
        responseData: {
          tableList: [],// 表格列表
          searchList: [{
            label: '',
            value: ''
          }],
        },// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    // 事件属性
    methods: {
      handlePageInit(){
        this.pageData.loading = true;// 创建加载窗口
        this.loadCmsRouterConfigList();// 读取路由菜单列表
      },// 页面初始化事件
      handleCurrentChange(val){
        this.form.pageNum = val;// 更换页码
        this.handlePageInit();// 进行数据加载
      },// 页码切换事件
      handleSizeChange(val){
        this.form.pageSize = val;// 更换页面大小
        this.handlePageInit();// 进行数据加载
      },// 页面size切换事件
      handleTableSelection(val){
        let routerList = [];// 初始化多选数组
        for (let i=0; i<val.length; i++){
          routerList.push(val[i].routerId);
        }// 遍历多选的列表，将ID拼入数组中
        this.selection = routerList;// 进行多选值的切换
      },// 表格多选事件
      handleOpenSavePage(){
        // 判断当前登录用户所拥有的的操作权限
        if (PermissionsToDetectFormUser(getPermission(), "10001")){
          // 拥有对应权限，首先清除对应表单，打开隐藏面板
          this.pageData.formPanelType = 1;// 新增页面
          this.form.routerForm.routerId = "";
          this.form.routerForm.routerName = "";
          this.form.routerForm.routerUrl = "";
          this.form.routerForm.routerIcon = "";
          this.form.routerForm.routerSuper = 0;
          this.form.routerForm.routerSuperId = "";
          this.form.routerForm.routerStatus = 0;
          this.form.routerForm.routerShowIndex = 0;
          this.pageData.formPanelStatus = true;
          this.pageData.formPanelTitle = "新增路由";
        } else {
          // 当前权限不足，不执行操作，给与相应提示
          this.$message.warning("您的权限不足，无法使用此功能，请联系管理员");
        }
      },// 新增按钮点击事件
      handleOpenUpdatePage(scope){
        // 判断当前登录用户所拥有的的操作权限
        if (PermissionsToDetectFormUser(getPermission(), "10003")){
          // 当前操作权限充足，进行相应操作
          this.pageData.formPanelType = 2;// 新增页面
          this.form.routerForm.routerId = scope.row.routerId;
          this.form.routerForm.routerName = scope.row.routerName;
          this.form.routerForm.routerUrl = scope.row.routerUrl;
          this.form.routerForm.routerIcon = scope.row.routerIcon;
          if (scope.row.routerSuperId === 0) {
            this.form.routerForm.routerSuper = 0;
            this.form.routerForm.routerSuperId = "";
            this.responseData.searchList = [];
          } else {
            this.form.routerForm.routerSuper = 1;
            this.form.routerForm.routerSuperId = scope.row.routerSuperData.value;
            this.responseData.searchList.push(scope.row.routerSuperData);
          }
          this.form.routerForm.routerStatus = scope.row.routerStatus;
          this.form.routerForm.routerShowIndex = scope.row.routerShowIndex;
          this.pageData.formPanelStatus = true;
          this.pageData.formPanelTitle = "编辑路由";
        } else {
          // 当前权限不足，不执行操作，给与相应提示
          this.$message.warning("您的权限不足，无法使用此功能，请联系管理员");
        }
      },// 表格编辑按钮点击事件
      handleCloseSavePage(){
        this.$confirm("确认关闭？").then(response => {
          this.pageData.formPanelStatus = false;
          this.pageData.formPanelTitle = '';
          this.pageData.formPanelType = 0;
          this.form.routerForm = {
            routerId: "",
            routerName: "",
            routerUrl: "",
            routerIcon: "",
            routerSuper: "",
            routerSuperId: "",
            routerStatus: "",
            routerShowIndex: ""
          };
        }).catch(err => {
          console.log(err);
        });
      },// 关闭新增/修改隐藏域





      handleSearchData(val){
        // 判断当前登录用户所拥有的的操作权限
        if (PermissionsToDetectFormUser(getPermission(), "10001")){
          // 当前操作权限充足，进行相应操作
          let prams = {queryStr: val};
          loadCmsRouterListByStr(prams).then(response => {
            if (response.code === '200'){
              this.responseData.searchList = response.data;
            } else {
              this.$message.warning(response.message);
            }
          }).catch(error => {
            console.info(error);
            this.$message.error(error);
          });
        } else {
          // 当前权限不足，不执行操作，给与相应提示
          this.$message.warning("您的权限不足，无法使用此功能，请联系管理员");
        }
      },// 搜索父级菜单事件
      handleSaveButtonClick(){
        if (this.pageData.formPanelType === 1) {// 新增接口调用
          // 判断当前登录用户所拥有的的操作权限
          if (PermissionsToDetectFormUser(getPermission(), "10001")){
            // 当前操作权限充足，进行敏感操作提示
            this.$confirm("此操作将保存当前所填写的路由信息，请核对后继续, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              // 同一操作，执行具体流程
              saveCmsRouterConfig(this.form.routerForm).then(response => {
                if (response.code === "200"){
                  this.pageData.formPanelStatus = false;
                  this.pageData.formPanelTitle = "";
                  this.pageData.formPanelType = 0;
                  this.$message.success('添加路由成功！');
                  this.form.routerForm = {
                    routerId: "",
                    routerName: "",
                    routerUrl: "",
                    routerIcon: "",
                    routerSuper: "",
                    routerSuperId: "",
                    routerStatus: "",
                    routerShowIndex: ""
                  };
                  this.handlePageInit();
                } else {
                  this.$message.warning(response.message);
                }
              }).catch( error =>{
                console.log(error);
                this.$message.error(error);
              });
            }).catch(close => {
              console.log(close);
              this.$message.info("已取消操作");
            });
          } else {
            // 当前权限不足，不执行操作，给与相应提示
            this.$message.warning("您的权限不足，无法使用此功能，请联系管理员");
          }
        } else {// 修改接口调用
          // 判断当前登录用户所拥有的的操作权限
          if (PermissionsToDetectFormUser(getPermission(), "10003")){
            // 当前操作权限充足，进行敏感操作提示
            this.$confirm("此操作将保存当前所填写的路由信息，请核对后继续, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              // 同一操作，执行具体流程
              updateCmsRouterConfig(this.form.routerForm).then(response => {
                if (response.code === "200"){
                  this.pageData.formPanelStatus = false;
                  this.pageData.formPanelTitle = "";
                  this.pageData.formPanelType = 0;
                  this.$message.success('添加路由成功！');
                  this.form.routerForm = {
                    routerId: "",
                    routerName: "",
                    routerUrl: "",
                    routerIcon: "",
                    routerSuper: "",
                    routerSuperId: "",
                    routerStatus: "",
                    routerShowIndex: ""
                  };
                  this.handlePageInit();
                } else {
                  this.$message.warning(response.message);
                }
              }).catch( error =>{
                console.log(error);
                this.$message.error(error);
              });
            }).catch(close => {
              console.log(close);
              this.$message.info("已取消操作");
            });
          } else {
            // 当前权限不足，不执行操作，给与相应提示
            this.$message.warning("您的权限不足，无法使用此功能，请联系管理员");
          }
        }



      },// 保存数据事件
      handleUpdateTableStatus(scope){
        // 判断当前登录用户所拥有的的操作权限
        if (PermissionsToDetectFormUser(getPermission(), "10005")){
          // 当前操作权限充足，进行相应操作
          this.$confirm("此操作将更改当前数据的发布状态, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let prams = {
              routerId: scope.row.routerId,
              routerStatus: scope.row.routerStatus === 1 ? 0: 1,
            };
            updateCmsRouterStatus(prams).then(response => {
              if (response.code === "200"){
                this.$message.success("发布状态修改成功！");
                this.handlePageInit();
              } else {
                this.$message.warning(response.message);
              }
            }).catch( error =>{
              console.log(error);
              this.$message.error(error);
            });
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        } else {
          this.$message.warning("您的权限不足，无法使用此功能，请联系管理员");
        }
      },// 表格更新发布状态按钮点击事件
      handleDeleteTableData(scope){
        // 判断当前登录用户所拥有的的操作权限
        if (PermissionsToDetectFormUser(getPermission(), "10002")){
          // 当前操作权限充足，进行相应操作
          this.$confirm("此操作将永久删除该路由数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let prams = {
              routerId: scope.row.routerId,
            };
            deleteCmsRouterConfig(prams).then(response => {
              if (response.code === "200"){
                this.$message.success("删除路由成功!");
                this.handlePageInit();
              } else {
                this.$message.warning(response.message);
              }
            }).catch( error =>{
              console.log(error);
              this.$message.error(error);
            });
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消删除");
          });
        } else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 表格删除事件

      // 接口
      loadCmsRouterConfigList(){
        loadCmsRouterConfigList(this.form).then(response => {
          if (response.code === "200"){
            this.pageData.loading = false;
            this.responseData.tableList = response.data.list;
            this.form.total = response.data.total;
          } else {
            this.$message.warning(response.message);
          }
        }).catch( error =>{
          console.log(error);
          this.$message.error(error);
        })
      }// 获取路由菜单数据列表




    },
    // 初始化方法
    created: function () {
      let _this = this;
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    mounted() {},//生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>

<style scoped>

</style>
